

<template>
  <div class="showTable">
    <div class="table-list-header" :class="{'active':open}" >
        <span>{{data.name}}</span>
        <mu-button  flat color="primary" small class="no-margin"  style="min-width:0.2rem;" @click="open = !open">
            {{!open?'展开':'收起'}}
        </mu-button>
    </div>
    <div class="table-list-body" :class="{'active':open}">
       <div ref="tableHTML" >
          
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'checkTable',
    components: {
     
    },
    props: {
      
      data: {
        type: Object,
        default: () => {}
      },
    },
    data() {
      return {
        open:false,
        tableHTML:''
      }
    },
    computed: {},
    created() {
        this.$nextTick(o=>{
          this.tableHTML = this.creatHtml();
          this.$refs.tableHTML.innerHTML = this.tableHTML;
        })
    },
    mounted() {
    },
    watch: {
      data(val){
        this.$nextTick(o=>{
          this.tableHTML = this.creatHtml();
          this.$refs.tableHTML.innerHTML = this.tableHTML;
        })
      }
    },
    methods: {
      //获取质量检查表列表
        creatHtml(){
            const str = `<table class="lanTable" border="1" cellspacing="0" cellpadding="3">
                <thead>
                    <tr>
                        <th style="width:0.7rem;">检查项</th>
                        <th>检查内容</th>
                    </tr>
                </thead>
                <tbody>`
            let body = ``
            let data = this.data.itemContentList || [];
            for(let i=0;i<data.length;i++){
                let istr = '<tr >'
                // if(i != 0){
                //     istr = `<tr >`
                // }
                body += istr
                for(let j=0;j<data[i]['contentList'].length;j++){
                    let str = ''
                    if(j==0){
                        str += `<td rowspan="${data[i]['contentList'].length}">${data[i].item}</td>
                        <td>${data[i]['contentList'][j]['contentName']}</td>`
                    }else{
                        str += `<td>${data[i]['contentList'][j]['contentName']}</td>`
                    }
                    body += str+'</tr>'
                }
                
            }
            const footer = `</tbody></table>`
            return str + body + footer
        },
    },
    destroyed() {
    }
  }
</script>

<style lang="scss" scoped>
.showTable{
    width:100%;
    height:100%;
     .table-list-header{
        height:0.55rem;
        width:100%;
        border:0.01rem solid #e8e8e8;
        margin:0.05rem 0 !important;
        display:flex;
        justify-content:space-between;
        align-items: center;
        color:#3D3D3D;
        font-size:0.13rem;
        padding:0 0.05rem;
    }
    .table-list-header.active{
        border-bottom:none;
    }
    .table-list-body{
        border-top:none;
        height:0;
        overflow:hidden;
        transition: height .3s .1s;
    }
    .table-list-body.active{
        height:auto;
    }
}
</style>

<style lang="scss">
.lanTable{
      border-collapse: collapse;
      width:100%;
      border:1px solid #E0E0E0;
      border-spacing: 2px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 0.11rem;
      background-color:#FCFCFC;
      thead > tr{
        //   background-color:#E0E0E0;
          th{
              font-weight: 500;
              text-align:center;
              padding:0.05rem;
          }
      }
      tr > td{
          padding:0.05rem;
      }
  }
</style>
